<!-- src/views/account/admin.vue -->
<template>
  <el-space direction="vertical" style="width: 100%;" alignment="start" fill>
    <div style="width: 120px">
      <el-button type="primary" @click="drawer = true">添加管理员</el-button>
    </div>
    <!-- 
      el-table-column
        label 表示表头名字
        prop 代表数据接口返回的字段
        如果需要自定义列，使用插槽 scope
          scope.$index 代表索引值
          scop.row  每一条的数据对象
     -->
    <el-table :data="adminList" border style="width: 100%">
      <el-table-column label="序号" width="180" >
        <template #default="scope">
          <span>{{ pageSize * (currentPage - 1) + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="adminname" label="账户名" width="180" />
      <el-table-column prop="role" label="权限" >
        <template #default="scope">
          <el-tag v-if="scope.row.role === 2" type="success">超级管理员</el-tag>
          <el-tag v-else type="danger">管理员</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" 
            >编辑</el-button
          >
          <el-popconfirm title="确认删除吗?" @confirm="deleItem(scope.row.adminid)">
            <template #reference>
              <el-button
                    size="small"
                    type="danger"
                    >删除</el-button
                  >
            </template>
          </el-popconfirm>
          
        </template>
      </el-table-column>
    </el-table>
    <el-pagination 
      background 
      small
      layout="total, sizes, prev, pager, next" 
      :total="tableData.length" 
      :page-sizes="[5, 10, 15, 20]"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-space>
  <!-- 添加管理员 - 抽屉 -->
  <el-drawer v-model="drawer" title="添加管理员" >
    <span>Hi there!</span>

    <!-- 树形控件 - 选择账户权限 -->
    <el-tree
      :data="treeData"
      show-checkbox
      node-key="path"
    />
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue';
  import { getAdminList, removeAdmin } from '@/api/admin'
  import { constantRoutes, asyncRoutes, type myRouteRecordRaw } from '@/router'
  interface IAdmin {
    adminname: string
    role: number
  }

  const currentPage = ref<number>(1)
  const pageSize = ref<number>(10)
  const tableData = ref<IAdmin[]>([])

  const handleSizeChange = (val: number) => {
    pageSize.value = val
  }
  const handleCurrentChange = (val: number) => {
    currentPage.value = val
  }

  const adminList = computed(() => {
    return tableData.value.filter((item, index) => {
      return index >= pageSize.value * (currentPage.value - 1) &&  index <  (pageSize.value * (currentPage.value - 1) + pageSize.value)
    })
  })

  const getAdmin = () => {
    getAdminList().then(res => {
      console.log(res.data)
      tableData.value = res.data.data
    })
  }
  onMounted(() => {
    getAdmin()
  })

  const deleItem = (adminid: string) => {
    removeAdmin({adminid}).then(() => {
      getAdmin()
    })
  }

  // 抽屉展示添加数据
  const drawer = ref<boolean>(false)
  interface ITreeDataObj {
    path: string
    label: string
    children?: ITreeDataObj[]
  }
  
  const menuList = [...constantRoutes, ...asyncRoutes] // 路由的原始数据
  const getTreeData = (menuList: myRouteRecordRaw[]) => { // 通过路由的原始数据 求出 树形控件数据
    const arr: ITreeDataObj[] = []
    menuList.map(item => {
      let obj: ITreeDataObj = {
        path: '',
        label: ''
      }
      if (item.meta) { // 过滤了一级菜单一级类似登录
        if (item.children) { // 二级菜单
          obj.path = item.path
          obj.label = item.meta.title as string
          obj.children = getTreeData(item.children)!
          arr.push(obj)
        } else {
          obj.path = item.path
          obj.label = item.meta.title as string
          arr.push(obj)
        }
      } else {
        if (item.children) { // 首页系列
          obj.path = item.children[0].path
          obj.label = item.children![0].meta!.title as string
          arr.push(obj)
        } 
      }
      
    })
    return arr
  }
  const treeData = getTreeData(menuList)
  console.log(treeData)
</script>
